<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./style.css">
    <title>Snippets for Beginners - 30 seconds of code</title>
    <meta charset="utf-8">
    <meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
    <meta name="keywords" content="javascript, snippets, code, programming">
    <meta name="author" content="Stefan Feješ (stefanfejes.com)">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#111">
    <meta property="og:title" content="30 seconds of code">
    <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
    <meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
    <link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
    <script>
      const search = (node) => {
        let matchingTags = [];
        Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
          let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
          if (data.includes(true)) {
            x.style.display = '';
            matchingTags.push(x.getAttribute('tags').split(',')[0]);
          }
          else x.style.display = 'none';
        });
        Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
          x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
        })
      }
      function scrollToTop() {
        const c = document.querySelector('.card-container').scrollTop;
        if (c > 0) {
          window.requestAnimationFrame(scrollToTop);
          document.querySelector('.card-container').scrollTo(0, c - c / 4);
        }
      };
      function scrollTo(element, to, id, duration) {
        if (duration <= 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 40;

        setTimeout(function () {
          element.scrollTop = element.scrollTop + perTick;
          if (element.scrollTop === to) {
            window.location.href = "#" + id;
            return;
          }
          scrollTo(element, to, id, duration - 40);
        }, 40);
      };
      function loader() {
        registerClickListener();
        if (window.innerWidth >= '768')
          document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
        else
          document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
      }
      function registerClickListener() {
        document.addEventListener('click', function (event) {
          if (event.target.classList.contains('collapse')) {
            event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
          }
          else if (event.target.classList.contains('menu-button')) {
            document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
            document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
            event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
          }
          else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
            document.querySelector('nav').classList = '';
            document.querySelector('[type="search"]').classList = '';
            document.querySelector('.menu-button').classList = 'menu-button';
          }
          else if (event.target.classList.contains('copy-button')) {
            const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
            const textArea = document.createElement("textarea");
            textArea.value = text.trim();
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand("Copy");
            document.body.removeChild(textArea);
            let tst = document.createElement('div');
            tst.classList = 'toast';
            tst.innerHTML = 'Snippet copied to clipboard!';
            document.body.appendChild(tst);
            setTimeout(function () {
              tst.style.opacity = 0;
              setTimeout(function () {
                document.body.removeChild(tst);
              }, 300);
            }, 1700);
          }
        }, false);
      }
    </script>
  </head>
  <body onload="loader()">
      <a href="https://github.com/30-seconds/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
    <div id="splash">
      <h1 id="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"> 30 seconds of code</a></h1>
      <p id="tagline">Curated collection of useful JavaScript snippets<br id="tagline-lg"/> that you can understand in 30 seconds or less.</p>
      <p id="doc-link"><a href="./array" class="button">View collection</a></p>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
            <h2 class="index-section">Snippets for Beginners</h2>
            <p style="text-align: justify">The following section is aimed towards individuals who are at the start of their web developer journey. Each snippet in the next section is simple yet very educational for newcomers. This section is by no means a complete resource for learning modern JavaScript. However, it is enough to grasp some common concepts and use cases. We also strongly recommend checking out <a href="https://developer.mozilla.org/bm/docs/Web/JavaScript">MDN web docs</a> as a learning resource.</p><br/>
        </div>
      </div>
